<template>
  <div class="left-menu-container h100 flex-column">
    <div class="top-label flex-row pl20 pr20">
      <div class="font14">工程目录</div>
      <div>
        <LeftOutlined class="cursor-pointer" />
      </div>
    </div>
    <div class="f1 overflow-y-auto">
      <el-menu :default-active="menuId"> <MyMenu :menu="menuList"></MyMenu> </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MyMenu from '@/components/MyMenu/index.vue'
import { LeftOutlined } from '@ant-design/icons-vue'

const menuId = ref('')
const menuList = ref([
  {
    id: '1',
    label: '工程文件夹1',
    isFile: false,
    children: [
      {
        id: '2',
        label: 'aa.js',
        isFile: true
      },
      {
        id: '3',
        label: '文件夹2',
        isFile: false,
        children: [
          {
            id: '4',
            label: 'aa.js',
            isFile: true,
            children: []
          }
        ]
      }
    ]
  }
])
</script>

<style scoped lang="less">
.left-menu-container {
  background-color: #f5f5f5;
  .top-label {
    justify-content: space-between;
    align-items: center;
    height: 32px;
    border-bottom: 1px solid #ccc;
  }
  :deep(.el-menu) {
    background-color: #f5f5f5;
    .el-sub-menu {
      background-color: #f5f5f5;
      height: 30px;
    }
    .el-sub-menu__title {
      height: 100%;
      line-height: 30px;
    }
    .el-menu-item {
      background-color: #f5f5f5;
      height: 30px;
      &.is-active {
        background-color: #d9ecff;
      }
    }
  }
}
</style>
